<template>
  <div id="home">
    <!-- 数据块 -->
    <div class="block">
      <el-row :gutter="20">
        <!-- 活动次数 -->
        <el-col :lg="6" :sm="12">
          <div class="list">
            <div class="left">
              <div class="num">{{ state.activitiesScrolling }}</div>
              <div class="name">活动次数</div>
            </div>
            <div class="right">
              <i class="iconfont icon-pingjiacishu"></i>
            </div>
          </div>
        </el-col>
        <!-- 活动人数 -->
        <el-col :lg="6" :sm="12">
          <div class="list two">
            <div class="left">
              <div class="num">{{ state.peoplesScrolling }}</div>
              <div class="name">活动人数</div>
            </div>
            <div class="right">
              <i class="iconfont icon-renshu"></i>
            </div></div
        ></el-col>
        <!-- 覆盖城市 -->
        <el-col :lg="6" :sm="12">
          <div class="list three">
            <div class="left">
              <div class="num">{{ state.placesScrolling }}</div>
              <div class="name">覆盖城市</div>
            </div>
            <div class="right">
              <i class="iconfont icon-24gf-city2"></i>
            </div></div
        ></el-col>
        <!-- 已助人数 -->
        <el-col :lg="6" :sm="12">
          <div class="list four">
            <div class="left">
              <div class="num">{{ state.helpsScrolling }}</div>
              <div class="name">已助人数</div>
            </div>
            <div class="right">
              <i class="iconfont icon-minzhengtubiao1-08"></i>
            </div></div
        ></el-col>
      </el-row>
    </div>
    <!-- echarts -->
    <div class="echarts">
      <el-row :gutter="20">
        <el-col :lg="6" :md="24">
          <PieEcharts :seriesDataInfo="pieDataInfo"></PieEcharts>
        </el-col>
        <el-col :lg="12" :md="24">
          <MapEcharts :seriesDataInfo="mapDataInfo"></MapEcharts>
        </el-col>
        <el-col :lg="6" :md="24">
          <RoseEcharts :seriesDataInfo="roseDataInfo"></RoseEcharts>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :md="24">
          <BarEcharts :seriesDataInfo="barDataInfo"></BarEcharts>
        </el-col>
        <el-col :lg="12" :md="24">
          <LineEcharts :seriesDataInfo="lineDataInfo"></LineEcharts>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

import {
  PieEcharts,
  LineEcharts,
  BarEcharts,
  MapEcharts,
  RoseEcharts
} from '@/base-ui/echarts'

import { getHomeBlock } from '@/server/serve/api_admin'

import type { PieEchartsTypes, LineEchartsTypes } from '@/base-ui/echarts'

import nearlyWeek from '@/utils/nearlyWeek'

const state = reactive({
  // 活动次数
  activities: 0,
  // 已助人数
  helps: 0,
  // 活动人数
  peoples: 0,
  // 覆盖城市
  places: 0,
  // 滚动
  activitiesScrolling: 0,
  helpsScrolling: 0,
  peoplesScrolling: 0,
  placesScrolling: 0
})

// 数字滚动
const numScrolling1 = (num: number, time = 10) => {
  let timer = setInterval(() => {
    state.activitiesScrolling += 1
    if (state.activitiesScrolling >= num) {
      clearInterval(timer)
    }
  }, time)
}
const numScrolling2 = (num: number, time = 10) => {
  let timer = setInterval(() => {
    state.peoplesScrolling += 111
    if (state.peoplesScrolling >= num) {
      clearInterval(timer)
    }
  }, time)
}
const numScrolling3 = (num: number, time = 10) => {
  let timer = setInterval(() => {
    state.placesScrolling += 11
    if (state.placesScrolling >= num) {
      clearInterval(timer)
    }
  }, time)
}
const numScrolling4 = (num: number, time = 10) => {
  let timer = setInterval(() => {
    state.helpsScrolling += 42
    if (state.helpsScrolling >= num) {
      clearInterval(timer)
    }
  }, time)
}

// 获取数据块数据
getHomeBlock().then(({ data: bolckResult }) => {
  const { activities, helps, peoples, places } = bolckResult.data!
  state.activities = activities
  state.helps = helps
  state.peoples = peoples
  state.places = places
  numScrolling1(state.activities, 60)
  numScrolling2(state.peoples, 0)
  numScrolling3(state.places, 0)
  numScrolling4(state.helps, 0)
})

// 饼状图数据
const pieDataInfo: PieEchartsTypes = {
  height: '300px',
  width: '100%',
  name: '网站各项数据指标',
  data: [
    { value: 2, name: '公益作用' },
    { value: 20, name: '新闻资讯' },
    { value: 12, name: '预约记录' },
    { value: 3, name: '公益事项' },
    { value: 22, name: '公益记录' },
    { value: 32, name: '活动历程' }
  ]
}

// 玫瑰图数据
const roseDataInfo: PieEchartsTypes = {
  name: '网站文章数量分布',
  width: '100%',
  data: [
    { value: 40, name: '公益作用' },
    { value: 38, name: '新闻资讯' },
    { value: 32, name: '公益事项' },
    { value: 30, name: '公益记录' },
    { value: 28, name: '活动历程' },
    { value: 26, name: '志愿者' },
    { value: 22, name: '公益星流量' },
    { value: 18, name: '邮件发送' }
  ]
}

// 折线图数据
const lineDataInfo: LineEchartsTypes = {
  width: '100%',
  name: '近七天申请志愿活动人数',
  xAixsData: nearlyWeek(),
  data: [15, 23, 22, 21, 13, 17, 26]
}

// 柱状图数据
const barDataInfo: LineEchartsTypes = {
  name: '近七天活动举办数',
  xAixsData: nearlyWeek(),
  data: [3, 6, 2, 2, 1, 2, 3]
}

// 中国地图数据
const mapDataInfo: PieEchartsTypes = {
  name: '全国各地志愿者分布',
  data: [
    {
      name: '太原',
      value: 300
    },
    {
      name: '兰州',
      value: 200
    },
    {
      name: '大同',
      value: 140
    },
    {
      name: '海门',
      value: 152
    },
    {
      name: '鄂尔多斯',
      value: 139
    },
    {
      name: '招远',
      value: 120
    },
    {
      name: '舟山',
      value: 122
    },
    {
      name: '齐齐哈尔',
      value: 123
    },
    {
      name: '盐城',
      value: 120
    },
    {
      name: '赤峰',
      value: 218
    },
    {
      name: '青岛',
      value: 120
    },
    {
      name: '乳山',
      value: 89
    },
    {
      name: '金昌',
      value: 102
    },
    {
      name: '泉州',
      value: 118
    },
    {
      name: '莱西',
      value: 120
    },
    {
      name: '日照',
      value: 152
    },
    {
      name: '胶南',
      value: 88
    },
    {
      name: '南通',
      value: 124
    },
    {
      name: '拉萨',
      value: 91
    },
    {
      name: '云浮',
      value: 93
    },
    {
      name: '梅州',
      value: 116
    },
    {
      name: '文登',
      value: 122
    },
    {
      name: '上海',
      value: 540
    },
    {
      name: '攀枝花',
      value: 101
    },
    {
      name: '威海',
      value: 122
    },
    {
      name: '承德',
      value: 117
    },
    {
      name: '厦门',
      value: 118
    },
    {
      name: '汕尾',
      value: 115
    },
    {
      name: '潮州',
      value: 124
    },
    {
      name: '丹东',
      value: 40
    },
    {
      name: '太仓',
      value: 45
    },
    {
      name: '曲靖',
      value: 103
    },
    {
      name: '烟台',
      value: 121
    },
    {
      name: '福州',
      value: 119
    },
    {
      name: '瓦房店',
      value: 39
    },
    {
      name: '即墨',
      value: 45
    },
    {
      name: '抚顺',
      value: 123
    },
    {
      name: '玉溪',
      value: 52
    },
    {
      name: '张家口',
      value: 114
    },
    {
      name: '阳泉',
      value: 85
    },
    {
      name: '莱州',
      value: 37
    },
    {
      name: '湖州',
      value: 86
    },
    {
      name: '汕头',
      value: 116
    },
    {
      name: '昆山',
      value: 95
    },
    {
      name: '宁波',
      value: 56
    },
    {
      name: '湛江',
      value: 110
    },
    {
      name: '揭阳',
      value: 116
    },
    {
      name: '荣成',
      value: 41
    },
    {
      name: '连云港',
      value: 119
    },
    {
      name: '葫芦岛',
      value: 120
    },
    {
      name: '常熟',
      value: 120
    },
    {
      name: '东莞',
      value: 113
    },
    {
      name: '河源',
      value: 68
    },
    {
      name: '淮安',
      value: 33
    },
    {
      name: '泰州',
      value: 49
    },
    {
      name: '南宁',
      value: 108
    },
    {
      name: '营口',
      value: 65
    },
    {
      name: '114',
      value: 49
    },
    {
      name: '江阴',
      value: 37
    },
    {
      name: '蓬莱',
      value: 75
    },
    {
      name: '韶关',
      value: 113
    },
    {
      name: '嘉峪关',
      value: 98
    },
    {
      name: '广州',
      value: 113
    },
    {
      name: '延安',
      value: 109
    },
    {
      name: '清远',
      value: 113
    },
    {
      name: '中山',
      value: 113
    },
    {
      name: '昆明',
      value: 73
    },
    {
      name: '寿光',
      value: 86
    },
    {
      name: '盘锦',
      value: 122
    },
    {
      name: '长治',
      value: 113
    },
    {
      name: '深圳',
      value: 122
    },
    {
      name: '珠海',
      value: 52
    },
    {
      name: '宿迁',
      value: 118
    },
    {
      name: '咸阳',
      value: 36
    },
    {
      name: '铜川',
      value: 35
    },
    {
      name: '平度',
      value: 97
    },
    {
      name: '佛山',
      value: 23
    },
    {
      name: '海口',
      value: 35
    },
    {
      name: '江门',
      value: 61
    },
    {
      name: '章丘',
      value: 72
    },
    {
      name: '肇庆',
      value: 112
    },
    {
      name: '大连',
      value: 62
    },
    {
      name: '临汾',
      value: 36
    },
    {
      name: '吴江',
      value: 120
    },
    {
      name: '石嘴山',
      value: 106
    },
    {
      name: '沈阳',
      value: 38
    },
    {
      name: '苏州',
      value: 62
    },
    {
      name: '茂名',
      value: 68
    },
    {
      name: '嘉兴',
      value: 76
    },
    {
      name: '长春',
      value: 88
    },
    {
      name: '胶州',
      value: 36
    },
    {
      name: '银川',
      value: 47
    },
    {
      name: '张家港',
      value: 82
    },
    {
      name: '三门峡',
      value: 111
    },
    {
      name: '锦州',
      value: 41
    },
    {
      name: '南昌',
      value: 68
    },
    {
      name: '柳州',
      value: 109
    },
    {
      name: '三亚',
      value: 84
    },
    {
      name: '自贡',
      value: 104
    },
    {
      name: '吉林',
      value: 57
    },
    {
      name: '阳江',
      value: 111
    },
    {
      name: '泸州',
      value: 39
    },
    {
      name: '西宁',
      value: 101
    },
    {
      name: '宜宾',
      value: 104
    },
    {
      name: '呼和浩特',
      value: 111
    },
    {
      name: '成都',
      value: 52
    },
    {
      name: '重庆',
      value: 119
    }
  ]
}
</script>

<style scoped lang="less">
#home {
  .block {
    margin-top: -20px;
    .list {
      margin-top: 20px;
      display: flex;
      background: linear-gradient(to right, #59bcff, #59d2ff);
      border-radius: 16px;
      padding: 20px;
      overflow: hidden;
      align-items: center;
      justify-content: space-between;
      height: 130px;
      box-sizing: border-box;
      .left {
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .num {
          font-size: 2.25em;
          font-weight: 600;
        }
        .name {
          font-size: 15px;
        }
      }
      .right {
        i {
          color: #fff;
          font-size: 2.8em;
        }
      }
    }
    .two {
      background: linear-gradient(to right, #4cdf95, #55f497);
    }
    .three {
      background: linear-gradient(to right, #fdbd69, #ffde81);
    }
    .four {
      background: linear-gradient(to right, #ff7d60, #ffc67d);
    }
  }
  .echarts {
    // margin-top: 20px;
    .el-row {
      .el-col {
        margin-top: 20px;
      }
    }
  }
}
</style>
